import React, { useEffect, useState } from 'react';
import { Menu, Button } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
import type { MenuProps } from 'antd';
import cookie from 'js-cookie';
import './BaseoutLess.less';



const BaseOut: React.FC = () => {
  const [current, setCurrent] = useState('/home');
  const nav = useNavigate();

  useEffect(() => {
    if (cookie.get('username')) {
      nav('/home')
    } else {
      nav('/login')
    }
  }, [])

  const pathItems:  MenuProps['items'] = [
    {
      label: '首页',
      key: '/home',
    },
    {
      label: '详情页面',
      key: '/detail',
    },
    {
      label: '个人中心',
      key: '/center',
    },
    {
      label: '只因页面',
      key: '/result',
    },
  ]

  const changeMenuItem = (e: any) => {
    setCurrent(e.key);
    nav(e.key);
  }

  const getOutLogin = () => {
    cookie.set('username', '')
    nav('/login')
  }
  
  const CommonHeader = () => {
    return (
      <div className='common-header'>
        <Menu onClick={changeMenuItem} selectedKeys={[current]} mode="horizontal" items={pathItems} />
        <Button className='common-header-out' onClick={getOutLogin}>退出登陆</Button>
      </div>
    )
  }

  return (
    <div className='layout-box'>
      <CommonHeader />
      <div className='layout-content'>
        <Outlet />
      </div>
      <div className='layout-footer'>底部</div>
    </div>
  )
}

export default BaseOut;